import 'package:animations/animations.dart';
import 'package:eyepetizer_example/page/discovery/topic_detail_page.dart';
import 'package:eyepetizer_example/utils/cache_image.dart';
import 'package:flutter/material.dart';

import '../../model/discovery/topic_model.dart';
import '../../state/base_list_state.dart';
import '../../viewmodel/discovery/topic_viewmodel.dart';

class TopicPage extends StatefulWidget {
  const TopicPage({Key? key}) : super(key: key);

  @override
  State<TopicPage> createState() => _TopicPageState();
}

class _TopicPageState
    extends BaseListState<TopicItemModel, TopicViewModel, TopicPage> {
  @override
  Widget getContentChild(TopicViewModel model) => ListView.separated(
        itemCount: model.itemList.length,
        itemBuilder: (context, index) {
          return OpenContainer(
            closedBuilder: (context, action) {
              return _closedWidget(model.itemList[index]);
            },
            openBuilder: (context, action) {
              var id = model.itemList[index].data?.id;
              if(id == null) {
                return Container();
              }
              return TopicDetailPage(detailId: id);
            },
          );
        },
        separatorBuilder: (BuildContext context, int index) {
          return const Divider(
            height: 0.5,
          );
        },
      );

  @override
  TopicViewModel get viewModel => TopicViewModel();

  Widget _closedWidget(TopicItemModel itemList) {
    return Padding(
      padding: const EdgeInsets.all(10),
      child: ClipRRect(
        borderRadius: BorderRadius.circular(4),
        child: cacheImage(
          itemList.data?.image ?? "",
          width: MediaQuery.of(context).size.width,
          height: 200,
        ),
      ),
    );
  }
}
